<template>
	<view class="mine">
		<view class="info">
			<image class="headerImg" :src="Avatar" v-if="Avatar"></image>
			<text class="headerImg iconfont icon-touxiang" v-else style="font-size: 128rpx;"></text>
			<view class="desc">
				<view class="name">
					{{ wxName }}
					<image v-if="vipEndDate" src="@/static/image/vipyear.png" class="vipyear"></image>
				</view>
				<view class="vipTime" v-if="vipEndDate">会员截止时间： {{ parseTime(vipEndDate,'{y}-{m}-{d}') }}</view>
			</view>
			<image src="@/static/image/logo3.png" mode="" class="bglogo"></image>
		</view>
		<view class="list">
			<view class="li" v-for="item in list" :key="item.code" @click="listTap(item)">
				<view class="label">
					<image :src="item.icon" class="icon"></image>
					{{ item.label }}
				</view>
				<view class="value">
					{{ item.tagLabel }}
					<text class="iconfont icon-xiangyoujiantou" style="font-size: 24rpx;margin-left: 20rpx;"></text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import lishiduihua from '@/static/image/lishiduihua.png';
import huiyuan from '@/static/image/huiyuan.png';
import kefu from '@/static/image/kefu.png';
import fenxiang from '@/static/image/fenxiang.png';
import config from '@/utils/config.js';
export default {
	data() {
		return {
			Avatar: uni.getStorageSync('Avatar'),
			wxName: uni.getStorageSync('wxName'),
			vipEndDate: uni.getStorageSync('vipEndDate') || null,
			list: [
				{
					label: '历史对话',
					code: 'lishiduihua',
					icon: lishiduihua,
					tagLabel: ''
				},
				// {
				// 	label: '联系客服',
				// 	code: 'kefu',
				// 	icon: kefu,
				// 	tagLabel: ''
				// },
				// {
				// 	label: '分享我们',
				// 	code: 'fenxiang',
				// 	icon: fenxiang,
				// 	tagLabel: ''
				// },
				{
					label: '开通会员',
					code: 'huiyuan',
					icon: huiyuan,
					tagLabel: '无限对话次数'
				}
			]
		};
	},
	onShow() {
		this.getInfo();
	},
	methods: {
		// 日期格式化
		parseTime(time, pattern) {
			
			if (arguments.length === 0 || !time) {
				return null;
			}
			const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
			let date;
			if (typeof time === 'object') {
				date = time;
			} else {
				if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
					time = parseInt(time);
				} else if (typeof time === 'string') {
					time = time
						.replace(new RegExp(/-/gm), '/')
						.replace('T', ' ')
						.replace(new RegExp(/\.[\d]{3}/gm), '');
				}
				if (typeof time === 'number' && time.toString().length === 10) {
					time = time * 1000;
				}
				date = new Date(time);
			}
			const formatObj = {
				y: date.getFullYear(),
				m: date.getMonth() + 1,
				d: date.getDate(),
				h: date.getHours(),
				i: date.getMinutes(),
				s: date.getSeconds(),
				a: date.getDay()
			};
			const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
				let value = formatObj[key];
				// Note: getDay() returns 0 on Sunday
				if (key === 'a') {
					return ['日', '一', '二', '三', '四', '五', '六'][value];
				}
				if (result.length > 0 && value < 10) {
					value = '0' + value;
				}
				return value || 0;
			});
			return time_str;
		},
		listTap(row) {
			switch (row.code) {
				case 'kefu':
					break;
				case 'fenxiang':
					break;
				case 'huiyuan':
					uni.navigateTo({
						url: '/pages/vip/index'
					});
					break;
				case 'lishiduihua':
					uni.navigateTo({
						url: '/pages/history/index'
					});
					break;
				default:
					break;
			}
		},
		getInfo() {
			const that = this;
			uni.getUserInfo({
				provider: 'weixin',
				success: function(infoRes) {
					console.log(infoRes);
					const { encryptedData, iv, signature, rawData } = infoRes;
					that.$post(
						'api/update_info',
						{
							appid: config.appid,
							encryptedData,
							iv,
							signature,
							rawData,
							openid: uni.getStorageSync('openid'),
							sessionKey: uni.getStorageSync('sessionKey'),
							avatarUrl: uni.getStorageSync('Avatar'),
							nickName: uni.getStorageSync('wxName')
							
						},
						{
							'Content-Type': 'application/json'
						}
					).then(res11 => {
						console.log(res11);
						const date =res11.data.vipEndDate&&res11.data.vipEndDate.replaceAll('-','/')
						uni.setStorageSync('vipEndDate', date);
						this.vipEndDate = date
					});
				}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.mine {
	width: 100vw;
	height: 100vh;
	overflow-y: auto;
	background-color: #ffffff;
	padding-top: 20rpx;
	box-sizing: border-box;

	.info {
		width: 686rpx;
		height: 192rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		box-shadow: 0px 2rpx 8rpx 0px rgba(42, 135, 255, 0.08);
		border-radius: 10rpx;
		margin: 32rpx auto;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;

		.headerImg {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.desc {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.name {
				height: 50rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 50rpx;
				display: flex;
				align-items: center;

				.vipyear {
					width: 96rpx;
					height: 36rpx;
					margin-left: 10rpx;
				}
			}

			.vipTime {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
		}

		.bglogo {
			width: 264rpx;
			height: 192rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.list {
		margin-top: 40rpx;

		.li {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}

			.label,
			.value {
				color: #000;
				font-size: 28rpx;
				font-weight: 600;
				display: flex;
				align-items: center;
			}

			.value {
				font-weight: normal;
				color: #999;
			}
		}
	}
}
</style>
